<template>
    <div>
         <!-- 头部 -->
      <van-nav-bar title="咨询" left-text="返回" fixed  @click-left="onClickLeft" left-arrow></van-nav-bar>
         <div class="chart-list" id="chart-list">
                    <!-- <div class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div> -->
                  
                </div>
                <hr>
                <div class="chart-form">
                    <div><textarea class="chart-form-message" id="message"></textarea></div>
                    <div><input type="button" id="send" class="chart-form-send" value="发送"></div>
                </div>
    </div>
</template>
<style scoped>
 #chart-container{
      width: 99vw;
      border: 1px solid red;
  }
  #chart-list{
      width: 99vw;
      height: 80vh;
      border: 1px solid rgb(45, 233, 130);
      overflow: hidden;
      overflow-y:auto;
  }
  .chart-form{
      width: 99vw;
      border: 1px solid rebeccapurple;
  }
  #message{
      width: 98vw;
  }
  #send{
      position: absolute;
      right: 10px;
      margin-top: -30px;
  }
  .user-face img{
      border: 1px solid rgb(163, 240, 163);
      width: 20px;
      height: 20px;
  }
  .user-message{
      margin: 10px 20px;
  }
</style>

<script>
import { Loading } from 'vant'
export default {
    data() {
        return {
            
        }
    },
    methods: {
        onClickLeft(){
          history.go(-1)
        }
    },
    mounted() {
      
       //建立websocket连接
            // var chartList = document.getElementById('chart-list');
            // let socket = io('ws://localhost:3000')
            // console.log(socket)

            
                
                
                
                send.addEventListener('click',function(){
                    // alert(1)
                    //获取textarea中的文本
                    let msg = document.getElementById('message').value
                    if(msg.trim()!='' && msg.length<30){
                        // console.log(msg)
                       var chartList = document.getElementById('chart-list');
                        let div = document.createElement('div')
                        div.className='chart-item';
                         div.innerHTML = `
                         <div style="margin-left:20px">
                        <div class="user-face" ><img style="border: 1px solid rgb(163, 240, 163);
                          width: 20px;
                          height: 20px;" src="images/avatar/" alt=""></div>
                        <span style="font-size:0.9em; ">用户<span>
                        <div class="user-message" style="margin: 10px 20px;">${msg}</div></div>
                `
                chartList.append(div);
                //将list元素滚动始终最底部
                chartList.scrollTop = chartList.scrollHeight;
                //点击send发送消息
                        document.getElementById('message').value='';
                    }
                })
                
    },
}
</script>